<template>
  <div class="body-box">
    <!-- 搜索 -->
    <el-form size="mini" :inline="true">
      <el-form-item label="组别：">
        <el-select v-model="group_id">
          <el-option v-for="(item,key) in team_list" :key="key" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关键字：">
        <el-input placeholder="请输入姓名或手机号码查询" v-model="mobile" style="width:200px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="com-btn" icon="el-icon-search" @click="search()">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <window-title title="报名列表"></window-title>
    <el-table
      size="mini"
      border
      :header-cell-style="{background:'#f8f8f8',color:'#333',borderRight:0}"
      :data="list.data"
      @selection-change="handleSelectionChange"
      style="margin-top:20px;"
    >
      <el-table-column type="index" width="60" label="序号"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="手机号" prop="phone"></el-table-column>
      <el-table-column label="组别">
        <template slot-scope="item">
          <el-tag size="mini" type="danger">{{item.row.team_name}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="来源" width="80px" prop="source"></el-table-column>
      <el-table-column label="报名时间" prop="create_time"></el-table-column>
      <el-table-column label="操作" width="90px">
        <template slot-scope="item">
          <el-button size="mini" icon="el-icon-view" @click="see(item.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
        background
        small
        :current-page="list.current_page"
        :page-size="list.per_page"
        layout="total, prev, pager, next, jumper"
        :total="list.total"
        @current-change="changePage"
      ></el-pagination>
    </div>
    <!-- 模态框 -->
    <el-dialog :visible.sync="view_model" title="报名信息" width="500px" :append-to-body	="true" @close="closeModel">
      <form-view ></form-view>
    </el-dialog>
  </div>
</template>

<script>
import windowTitle from "../../../components/unit/title.vue";
import formView from './user-edit.vue';

export default {
  components: { windowTitle,formView},
  props: { type: {}, active_id: {} },
  data() {
    return {
      activeName : '0',
      group_id: 0,
      mobile: "",
      team_list: [
        { name: "全部", id: 0 },
        { name: "男子十公里", id: 1 },
        { name: "亲子组", id: 2 },
        { name: "情侣组", id: 3 },
        { name: "男女接力赛", id: 4 }
      ],
   
      list: {
        current_page: 1,
        per_page:10,
        total:20,
        data: [
          {
            name:'是否',
            phone:'1657459844',
            source:'一块跑',
            team_name:'默认',
            create_time:'2020-03-12 12:53:02'
          }
        ]
      },
      set_list: [],
      all_num : 0,
      verify_num : 0,
      agree_num : 0,
      refuse_num : 0,
      load : true,
      view_model : false,
      view_data : {}
    };
  },
  mounted() {
    // this.getData();
    // this.getTeamInfo();
  },
  methods: {
    //获取活动组别信息
    // getTeamInfo(){
    //   this.ajaxs('active/getTeamInfo',{
    //     data:{active_id : this.active_id},
    //     success:(res) => {
    //       this.team_list = res.msg;
    //       this.team_list.unshift({name : '全部' , 'id' : 0});
    //     }
    //   });
    // },
    //查询
    search(){
      this.list.current_page = 1;
      this.getData();
    },
    //保存信息
    saveInfo(){
      this.view_model = false;
      // this.getData();
    },
    //模态框关闭
    closeModel(){
      this.view_data = [];
    },
    //查看报名信息
    see(data){
      console.log(data)
      this.view_model = true;
      this.view_data = data;
    },
    //获取列表数据
    getData() {
      this.load = true;
      this.ajaxs("active/getActiveUser", {
        data: { page: this.list.current_page, id: this.active_id , status : this.activeName , mobile : this.mobile ,team_id : this.group_id},
        success: res => {
          this.load = false;
          this.list = res.msg.list;
          this.all_num = res.msg.all;
          this.agree_num = res.msg.agree;
          this.refuse_num = res.msg.refuse;
        }
      });
    },
    //分页
    changePage(e) {
      this.list.current_page = e;
      // this.getData();
    },
    //判断表格单行是否可以被选中
    setIsSelect(row, index) {
      if (this.list.data[index].status != 0) return false;
      return true;
    },
    //全选、反选
    handleSelectionChange(e) {
      this.set_list = [];
      for (var i in e) {
        this.set_list.push(e.id);
      }
    },
    //切换审核状态
    handleClick(){
      this.list.current_page = 1;
      // this.getData();
    }
  }
};
</script>

<style>
</style>